workspaceThumbnails: Expand workspaces before scale-in animation

When the original animation was implemented, workspaces would only
ever be added at the end. We therefore got away with not having a
separate EXPANDING stage corresponding to the existing COLLAPSING
one when animating out.

Since support for creating in-between workspaces via DND was added,
this is no longer the case. And now that the thumbnails are centered,
the jump is quite noticeable.

Address this by adding new transitional states, so that we can
expand new thumbnails before scaling them in.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1609>

diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index 4c6909245fef06ef942671a5261bbf5dccbcaef0..73f25593bd8d912070fed69582ebe6c7aaf4be4b 100644 (file)
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -230,13 +230,15 @@ var WindowClone = GObject.registerClass({
 
 var ThumbnailState = {
     NEW:            0,
-    ANIMATING_IN:   1,
-    NORMAL:         2,
-    REMOVING:       3,
-    ANIMATING_OUT:  4,
-    ANIMATED_OUT:   5,
-    COLLAPSING:     6,
-    DESTROYED:      7,
+    EXPANDING:      1,
+    EXPANDED:       2,
+    ANIMATING_IN:   3,
+    NORMAL:         4,
+    REMOVING:       5,
+    ANIMATING_OUT:  6,
+    ANIMATED_OUT:   7,
+    COLLAPSING:     8,
+    DESTROYED:      9,
 };
 
 /**
@@ -928,6 +930,7 @@ var ThumbnailsBox = GObject.registerClass({
             let thumbnail = this._thumbnails[newWorkspaceIndex];
             this._setThumbnailState(thumbnail, ThumbnailState.NEW);
             thumbnail.slide_position = 1;
+            thumbnail.collapse_fraction = 1;
 
             this._queueUpdateStates();
 
@@ -1034,6 +1037,7 @@ var ThumbnailsBox = GObject.registerClass({
                 // not the initial fill, and not splicing via DND
                 thumbnail.state = ThumbnailState.NEW;
                 thumbnail.slide_position = 1; // start slid out
+                thumbnail.collapse_fraction = 1; // start fully collapsed
                 this._haveNewThumbnails = true;
             } else {
                 thumbnail.state = ThumbnailState.NORMAL;
@@ -1129,7 +1133,8 @@ var ThumbnailsBox = GObject.registerClass({
         if (this._stateCounts[ThumbnailState.ANIMATING_OUT] > 0)
             return;
 
-        // Once that's complete, we can start scaling to the new size and collapse any removed thumbnails
+        // Once that's complete, we can start scaling to the new size,
+        // collapse any removed thumbnails and expand added ones
         this._iterateStateThumbnails(ThumbnailState.ANIMATED_OUT, thumbnail => {
             this._setThumbnailState(thumbnail, ThumbnailState.COLLAPSING);
             thumbnail.ease_property('collapse-fraction', 1, {
@@ -1148,6 +1153,17 @@ var ThumbnailsBox = GObject.registerClass({
             });
         });
 
+        this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => {
+            this._setThumbnailState(thumbnail, ThumbnailState.EXPANDING);
+            thumbnail.ease_property('collapse-fraction', 0, {
+                duration: SLIDE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                onComplete: () => {
+                    this._setThumbnailState(thumbnail, ThumbnailState.EXPANDED);
+                },
+            });
+        });
+
         if (this._pendingScaleUpdate) {
             this.ease_property('scale', this._targetScale, {
                 mode: Clutter.AnimationMode.EASE_OUT_QUAD,
@@ -1158,11 +1174,13 @@ var ThumbnailsBox = GObject.registerClass({
         }
 
         // Wait until that's done
-        if (this._scale != this._targetScale || this._stateCounts[ThumbnailState.COLLAPSING] > 0)
+        if (this._scale !== this._targetScale ||
+            this._stateCounts[ThumbnailState.COLLAPSING] > 0 ||
+            this._stateCounts[ThumbnailState.EXPANDING] > 0)
             return;
 
         // And then slide in any new thumbnails
-        this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => {
+        this._iterateStateThumbnails(ThumbnailState.EXPANDED, thumbnail => {
             this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_IN);
             thumbnail.ease_property('slide-position', 0, {
                 duration: SLIDE_ANIMATION_TIME,